<template>
	<!-- 这个页面是用于设置星球收费的页面 -->
	<view class="main">
		<view class="center">
			<!-- 顶部显示星球类别 -->
			<view class="center_header">
				<view v-if="type==1">付费星球</view>
				<view v-else>免费星球</view>
				<view class="chi" hover-class="chn" @click="open">
					<uni-icons type="bottom" size="5rpx"></uni-icons>
				</view>
			</view>

			<!-- 下方显示信息 -->
			<view class="center_c">
				<!-- type==1 -->
				<view
					style="display: flex;font-size: 35rpx;font-weight: 900;color: #8a8a8a ;flex-direction: column;align-items: center;"
					v-if="type==1">
					<view style="display: flex;">￥<input placeholder="请输入你的价格"
							style="font-weight: 900;font-size: 35rpx;border-bottom: 0.5rpx #8a8a8a solid;padding: 5rpx;"
							@input="inputPrice" />
					</view>
				</view>
				<!-- type==2 -->
				<view style="display: flex;font-size: 20rpx;font-weight: 300;color: #111111 ;width: 80%;" v-else>
					本星球为免费星球，你可以邀请成员加入，或者是他人通过搜索加入
				</view>
			</view>
		</view>

		<!-- 用于显示页面下方的条款 -->
		<view class="bottom">
			<view style="font-size: xx-small;font-weight: 50;">包含低俗，盗版，色情，暴力，诈骗等内容的星球，将会封停改星球和账号</view>
		</view>

		<!-- 用于用户勾选协议 -->
		<view style="display: flex;width: 80%;">
			<checkbox-group @change="checkChange">
				<checkbox value="true" color="#65ff63">我已经阅读了《知识星球用户协议》</checkbox>
			</checkbox-group>
		</view>

		<!-- 最后一步，确定创建星球 -->
		<view class="end">
			<view class="ha" hover-start-time="100" hover-class="hb" @click="sumbit">创建</view>
		</view>
		<!-- 选择星球弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="popu_content">
				<view
					style="height: 30%;width: 100%;background-color: #d3d3d3;display: flex;justify-content: center;align-items: center;font-weight: 700;">
					请选择星球类型
				</view>
				<view
					style="height: 70%;width: 100%;background-color: #e1e1e1;display: flex;justify-content: center;align-items: center;font-weight: 300;							flex-direction: column;">
					<radio-group @change="radioChange">
						<view class="type">
							<radio value="1" color="#9e9e9e"></radio>付费星球
						</view>
						<view class="type">
							<radio value="2" color="#a7a7a7"></radio>免费星球
						</view>
					</radio-group>
				</view>
			</view>
		</uni-popup>

		<!-- 用于通知用户勾选条款 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" cancelText="关闭" confirmText="同意" title="警告"
				content="你还未勾选知识《星球用户协议》"></uni-popup-dialog>
		</uni-popup>

		
	</view>
</template>

<script>
	import request from '@/common/request.js';

	export default {
		data() {
			return {
				type: 1,
				price: null,
				name: null, //上个页面提交的星球名字
				do: false, //用户是否勾选了星球规则
				imagePath: null //上个页面提交的图片名字
			}
		},
		methods: {
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			radioChange(e) {
				this.type = e.detail.value
			},
			checkChange(e) {
				var arry = e.detail.value
				if (arry[0] == 'true') {
					this.do = true
				} else {
					this.do = false
				}
			},
			// 同意弹出框
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			inputPrice(e) {
				this.price = e.detail.value
			},
			sumbit() {

				uni.uploadFile({
					url: 'api/upload/coursefile',
					filePath: this.imagePath,
					name: 'filedata',
					// header:{
					// 	 'Content-Type': 'multipart/form-data'
					// },
					success: (res) => {
						var data = JSON.parse(res.data)
						console.log(data);
						if (this.do == true) {
							const plantVo = {
								introduction: '',
								isFree: this.type,
								name: this.name,
								plantPic: data.path,
								price: this.price
							}
							var imagePath = this.imagePath //图片上传路径
							
							request('/plant/save', plantVo, 'POST').then(data => {
								console.log(data);
								uni.reLaunch({
									url:'/pages/View/planet/planet'
								})
							})
						} else {
							this.do == true
							this.dialogToggle()
						}
					}
				})

			},

		},
		onLoad(option) {
			this.name = option.name
			this.imagePath = option.imagePath
			// 获取token

		}
	}
</script>

<style>
	.main {
		background: linear-gradient(to top, #fff, #ffffff, #f1f1f1, #e8e8e8);
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-top: 100rpx;
		align-items: center;
	}

	.center {
		height: 500rpx;
		width: 80%;
		border-radius: 30rpx;
		border: 1rpx #bebebe solid;
		overflow: hidden;
		box-shadow: 3px 3px #a7a7a7, -1em 0 .4em #878787;
	}

	.center_header {
		height: 30%;
		width: 100%;
		background-color: #f0f0f0;
		border-bottom: #dcdcdc 0.7rpx solid;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-weight: 700;
	}

	.chi {
		height: 35rpx;
		width: 35rpx;
		background-color: #d3d3d3;
		border-radius: 20rpx;
		margin-left: 10rpx;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.chn {
		height: 35rpx;
		width: 35rpx;
		background-color: #d3d3d3;
		border-radius: 20rpx;
		margin-left: 10rpx;
		align-items: center;
		display: flex;
		justify-content: center;
		background-color: #a7a7a7;
	}

	.popu_content {
		width: 500rpx;
		background-color: #ffffff;
		height: 400rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.type {
		height: 80rpx;
	}

	.center_c {
		height: 70%;
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		margin-top: 100rpx;
		width: 80%;
		height: 100rpx;
	}

	.end {
		height: 30%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.ha {
		width: 80%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #49d449;
		border-radius: 20rpx;
		font-size: 40rpx;
		font-weight: 800;
		box-shadow: 10px 5px 5px #bdbdbd;
	}

	.hb {
		width: 80%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #9bc18e;
		font-size: 40rpx;
		font-weight: 800;
	}
</style>
